@use "sass:map";
@use "./mixins/button.scss" as *;
@use "./common/var.scss" as *;
@use "./mixins/shadow.scss" as *;

$types: "primary", "success", "warning", "error", "info";
.t-button {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  text-align: center;
  overflow: hidden;
}

@each $type in $types {
  .t-button__#{$type} {
    @include button-type($type);
    color: map.get($text-colors, "white");
    &:hover {
      @include button-type_hover($type);
    }
  }
  .t-button-plain__#{$type} {
    @include button-plain($type);
    &:hover {
      @include button-plain_hover($type);
    }
  }
}

$sizes: "primary", "mini", "small", "big", "max", "xm";
$sizes-map: (
  "primary": (
    "padding-vertical": 5px,
    "padding-horizontal": 8px,
    "font-size": 16px,
    "border-radius": 5px,
    "width": 68px,
    "height": 24px,
  ),
  "mini": (
    "padding-vertical": 1px,
    "padding-horizontal": 3px,
    "font-size": 12px,
    "border-radius": 4px,
    "width": 40px,
    "height": 18px,
  ),
  "small": (
    "padding-vertical": 2px,
    "padding-horizontal": 4px,
    "font-size": 14px,
    "border-radius": 4px,
    "width": 50px,
    "height": 20px,
  ),
  "big": (
    "padding-vertical": 8px,
    "padding-horizontal": 12px,
    "font-size": 18px,
    "border-radius": 5px,
    "width": 72px,
    "height": 28px,
  ),
  "max": (
    "padding-vertical": 10px,
    "padding-horizontal": 15px,
    "font-size": 20px,
    "border-radius": 5px,
    "width": 100px,
    "height": 40px,
  ),
  "xm": (
    "padding-vertical": 15px,
    "padding-horizontal": 30px,
    "font-size": 28px,
    "border-radius": 10px,
    "width": 160px,
    "height": 60px,
  ),
);

@each $size in $sizes {
  .t-button-size__#{$size} {
    @include button-size(
      map.get($sizes-map, $size, "padding-vertical"),
      map.get($sizes-map, $size, "padding-horizontal"),
      map.get($sizes-map, $size, "font-size"),
      map.get($sizes-map, $size, "padding-vertical"),
      map.get($sizes-map, $size, "width"),
      map.get($sizes-map, $size, "height")
    );
  }
}

.t-button__round {
  border-radius: 20px;
}
